<template>
	<view class="big-box">
		<view class="color-box">
			<!-- 搜索栏 -->
			<view class="search-box">
				<!-- 扫描按钮 -->
				<view class="scan-btn">
					<image src="../../static/pic/home/search-scan.png" class='search-scan-pic'></image>
				</view>
				<!-- 搜索内容 input -->
				<view class="search-content">
					<input class="search-input" v-model="searchInput" placeholder="韩系氛围感穿搭" />
				</view>
				<!-- 拍照按钮 -->
				<view class="picture-btn">
					<image src="../../static/pic/home/search-pic.png" class='search-pic'></image>
				</view>
				<!-- 搜索按钮 -->
				<view class="search-btn">
					搜索
				</view>
			</view>
			<!-- 推荐栏 -->
			<view class="tuijian-box">
				<view class="tuijian-left">
					<view class="tuijian-left-item" v-for="dtjitem of defaultTuijianArr" :key="dtjitem.comid"
						:class="comIndex==dtjitem.comid ? 'active' : ''" @click="changeArea(dtjitem.comid)">
						{{dtjitem.text}}
					</view>
				</view>
				<view class="tuijian-right">
					<view class="tuijian-right-item" v-for="tjitem of tuijianArr" :key="tjitem.comid">
						{{tjitem.text}}
					</view>
				</view>

			</view>
		</view>

		<!-- 相关栏 -->
		<view class=" about-box">
			<view class="about-content-box">
				<!-- 相关内容 -->
				<view class="about-item" v-for="item of aboutArr" :key="item.aid">
					<view class="about-pic">
						<image class="about-pic-item" :src="item.pic"></image>
					</view>
					<view class="about-title">
						{{item.title}}
					</view>
				</view>
				<!-- 下一页 -->
				<view class="about-next-dot">
					<view class="next-dot" @click="changeDot(i)" :class="activeDot == i?'active':''" v-for="i of 2"
						:key="i">

					</view>
				</view>
			</view>

		</view>
		<!-- 商品内容盒子 -->
		<view class="content-out-box">
			<view class="content-in-box">
				<navigator class="content-item" v-for="item of contentArr" :key="item.gid" :url="'/subpkg/goods-detail/goods-detail?goods_id=' + item.gid" open-type="navigate">
					<view class="pic">
						<image class="shangpin-pic" :src="item.pic" mode=""></image>
					</view>
					<view class="title">
						{{setTitleLength(item.title)}}
					</view>
					<view class="more-info" v-if="isShowInfo(item.info)">
						{{showInfo(isShowInfo(item.info))}}
					</view>
					<view class="info">
						<view class="price">
							<view class="price-danwei">
								￥
							</view>
							{{item.price}}
							<view class="pay-info">
								{{buyPeople(item.buyCount)}}人付款
							</view>
						</view>

					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchInput: '',
				comIndex: 1,
				activeDot: 1,
				aboutArr: [{
						aid: 'about01',
						title: "买菜",
						pic: "../../static/pic/home/maicai.png"
					}, {
						aid: 'about02',
						title: "补贴",
						pic: "../../static/pic/home/butie.png"
					},
					{
						aid: 'about03',
						title: "直播",
						pic: "../../static/pic/home/zhibo.png"
					}, {
						aid: 'about04',
						title: "飞猪",
						pic: "../../static/pic/home/feizhu.png"
					}, {
						aid: 'about05',
						title: "聚划算",
						pic: "../../static/pic/home/juhuasuan.png"
					}, {
						aid: 'about06',
						title: "红包",
						pic: "../../static/pic/home/hongbao.png"
					}, {
						aid: 'about07',
						title: "斗地主",
						pic: "../../static/pic/home/about-poke.png"
					}, {
						aid: 'about08',
						title: "游戏",
						pic: "../../static/pic/home/game.png"
					}, {
						aid: 'about09',
						title: "摇现金",
						pic: "../../static/pic/home/yaoxianjin.png"
					}, {
						aid: 'about10',
						title: "农场",
						pic: "../../static/pic/home/nongchang.png"
					}
				],
				contentArr: [{
						gid: '321314151',
						type: '1',
						title: "阿迪达斯三叶草凉鞋厨具",
						price: 210,
						buyCount: 510,
						info: 1,
						pic: '../../static/image/shangping/zkas5jgo.png'
					}, {
						gid: '41234871',
						type: '1',
						title: "外星人游戏本笔记本电脑x16 R2 Ultra RTX4060电竞玩家高考学生电脑办公学习设计师【2024新品】",
						price: 3400,
						buyCount: 5100,
						info: 5,
						pic: '../../static/image/shangping/y22tunwn.png'
					},
					{
						gid: '625421',
						type: '1',
						title: "耐克T恤男子OVERSIZE风短袖上衣夏季宽松FB8166",
						price: 1200,
						buyCount: 10010,
						info: 4,
						pic: '../../static/image/shangping/wivlmauo.png'
					}, {
						gid: '6377388211',
						type: '1',
						title: "官方耐克乔丹AJ1板鞋男运动鞋秋季新款低帮缓震轻便HM3711 ",
						price: 160,
						buyCount: 130,
						info: 2,
						pic: '../../static/image/shangping/5uku5aoq.png'
					},
					{
						gid: '123121151',
						type: '1',
						title: "上海迪士尼玲娜贝儿",
						price: 20,
						buyCount: 1510,
						info: 3,
						pic: '../../static/image/shangping/4wc2wtut.png'
					}, {
						gid: '5611234v344',
						type: '1',
						title: "爱马仕包包",
						price: 54000,
						buyCount: 120,
						info: 2,
						pic: '../../static/image/shangping/qp4059d3.png'
					}
				],
				defaultTuijianArr: [{
						comid: '0',
						text: '关注'
					},
					{
						comid: '1',
						text: '推荐'
					}
				],
				tuijianArr: [{
						comid: '2',
						text: '居家'
					},
					{
						comid: '3',
						text: '数码'
					},
					{
						comid: '4',
						text: '穿搭'
					},
					{
						comid: '5',
						text: '美食'
					},
					{
						comid: '6',
						text: '护肤'
					}
				]
			};
		},
		methods: {
			changeArea(num) {
				this.comIndex = num
			},
			changeDot(num) {
				this.activeDot = num
			},
			isShowInfo(num) {
				if (num == 1) return false
				else return num
			},
			// 1正常 2搜过的店 3买过的店 4圈粉上万
			showInfo(num) {
				if (num == 2) return "搜过的店"
				else if (num == 3) return "买过的店"
				else if (num == 4) return "圈粉上万"
				else if (num == 5) return "常看的店"
			},
			buyPeople(num) {
				if (num < 100) return num
				else if (num < 200) return '100+'
				else if (num < 300) return '200+'
				else if (num < 400) return '300+'
				else if (num < 500) return '400+'
				else if (num < 600) return '500+'
				else if (num < 700) return '600+'
				else if (num < 800) return '700+'
				else if (num < 900) return '800+'
				else if (num < 1000) return '900+'
				else if (num < 2000) return '1000+'
				else if (num < 5000) return '2000+'
				else if (num < 10000) return '5000+'
				else return '10000+'
			},
			setTitleLength(str) {
				if (str.length > 10) return str.slice(0, 10) + '...'
				else return str
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {}

	// 大盒子
	.big-box {
		height: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
		box-sizing: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.color-box {
			background: linear-gradient(rgb(254, 225, 229), rgb(241, 241, 241));
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}

	// 搜索栏
	.search-box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 10rpx 0;
		width: 95%;
		height: 80rpx;
		border-radius: 30rpx;
		border: 6rpx solid rgb(247, 84, 17);
		background-color: white;

		.scan-btn {
			margin: 4rpx 20rpx;
			height: 72rpx;
			width: 72rpx;

			.search-scan-pic {
				width: 100%;
				height: 100%;
				cursor: pointer;
			}
		}

		.search-content {
			display: flex;
			align-items: center;
			margin: 4rpx 0;
			height: 72rpx;
			width: 50%;

			.search-input {
				padding-left: 20rpx;
				font-size: 36rpx;
				border-left: 2rpx solid #e7e7e7;
			}
		}

		.picture-btn {
			margin: 4rpx 20rpx;
			height: 72rpx;
			width: 72rpx;

			.search-pic {
				width: 100%;
				height: 100%;
				cursor: pointer;
			}
		}

		.search-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 1rpx;
			margin: 4rpx 0;
			margin-right: 6rpx;
			border-radius: 20rpx;
			height: 72rpx;
			width: 160rpx;
			background-color: rgb(255, 98, 1);
			color: white;
			font-size: 36rpx;
			cursor: pointer;
		}
	}

	// 推荐栏
	.tuijian-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 95%;
		height: 60rpx;

		.tuijian-left {
			display: flex;
			flex-direction: row;
			position: relative;

			.tuijian-left-item {
				margin-right: 20rpx;
			}
		}

		.tuijian-right {
			display: flex;
			flex-direction: row;
			position: relative;

			.tuijian-right-item {
				margin-right: 20rpx;
			}
		}

		.active {
			position: relative;
			color: rgb(247, 83, 7);
		}

		.active::after {
			position: absolute;
			top: 45rpx;
			left: 20rpx;
			content: '';
			width: auto;
			min-width: 30rpx;
			height: 4rpx;
			background: rgb(247, 83, 7);
			border-radius: 2rpx;
			display: block;
			margin-top: 2rpx;
		}
	}

	// 相关栏
	.about-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 300rpx;
		background-color: rgb(241, 241, 241);

		.about-content-box {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			border-radius: 20rpx;
			width: 95%;
			height: 280rpx;
			background-color: #fff;

			.about-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 20%;
				height: 130rpx;
				cursor: pointer;

				.about-pic {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100rpx;
					width: 100%;

					.about-pic-item {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 80%;
						height: 80%;
						object-fit: cover;
					}
				}

				.about-title {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 30rpx;
					width: 100%;
					font-size: 28rpx;
				}
			}
		}

		.about-next-dot {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 20rpx;
			width: 100%;

			.next-dot {
				width: 30rpx;
				height: 6rpx;
				background-color: rgb(231, 231, 231);
				cursor: pointer;
				border-radius: 2rpx;
			}

			.active {
				width: 16rpx;
				background-color: rgb(249, 111, 27);
				margin: 0 6rpx;
			}
		}
	}

	// 商品栏
	.content-out-box {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding-top: 10rpx;
		background-color: rgb(241, 241, 241);

		.content-in-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			width: 95%;

			.content-item {
				display: flex;
				flex-direction: column;
				width: 49%;
				height: 500rpx;
				background-color: #fff;
				border-radius: 10rpx;
				margin: 10rpx 0;

				.pic {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 400rpx;
					width: 100%;
					cursor: pointer;

					.shangpin-pic {
						height: 95%;
						width: 95%;
						object-fit: cover;
						border: 2rpx solid rgb(242,242,242);
					}
				}

				.title {
					display: flex;
					align-items: center;
					width: 96%;
					padding: 0 2%;
					padding-top: 5rpx;
					font-size: 30rpx;
				}

				.more-info {
					display: flex;
					align-items: center;
					height: 40rpx;
					padding: 0 2%;
					font-size: 26rpx;
					color: rgb(218, 158, 92);
				}

				.info {
					height: 80rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.price {
						display: flex;
						align-items: flex-end;
						color: rgb(250, 77, 8);
						font-size: 34rpx;
						font-weight: 600;

						.price-danwei {
							font-size: 24rpx;
						}

						.pay-info {
							display: flex;
							align-items: center;
							color: rgb(103, 103, 103);
							font-size: 28rpx;
							margin-left: 10rpx;
							font-weight: 400;
						}
					}


				}

			}
		}
	}
</style>